<template>
    <div class="sadd">
        <div class="ghead">
            <router-link to="/gm" class="gl">商品管理</router-link>
            <router-link to="/add" class="tj">商品添加</router-link>
            <router-link to="/fl" class="fl">分类管理</router-link>
            <b class="fa fa-search"></b>
            <b class="fa fa-filter"></b>
            <b  class="fa fa-exchange"></b>
            <router-link to="/qh" class="qh">切换查看</router-link>
        </div>
        <div class="slb">
            商品类别:
            <select name="sp" id="sp">
                <option value="">请选类目</option>
                <option value="">红色</option>
                <option value="">绿色</option>
                <option value="">黄色</option>
            </select>
        </div>
        <div class="snm">
            商品名称:
            <input type="text" name="" id="">
        </div>
        <div class="spi">
            商品图片：
            <div class="fa fa-plus-square-o"></div>
        </div>
        <div class="sxq">
            商品详情：
            <textarea name="comment"></textarea>
        </div>
        <div class="sbu">
            <button class="bb">保存</button>
            <button class="bq">取消</button>
        </div>
    </div>
</template>
<script>

</script>
<style>
       .sadd{
            width: 800px;
            height: 500px;
            background-color: rgb(218, 218, 238);
            margin: auto;
            position: relative;
        }
        .slb{
            top:10%;
            position: absolute;
            width: 400px;
            height: 80px;
            margin: auto;
          /*   background-color: red; */
           /*  text-align: center; */
            line-height: 50px;

        }
        .slb select{
           /*  top:1px;
            position: absolute; */
            width: 300px;
            margin: auto;
            height: 30px;
        }
        .snm{
            top:20%;
            position: absolute;
            width: 400px;
            height: 8 0px;
            margin: auto;
          /*   background-color: green; */
            line-height: 50px;
        }
        .snm input{
            width: 300px;
            margin: auto;
            height: 30px;
        }
        .spi{
            top:30%;
            position: absolute;
            width: 400px;
            height: 100px;
            margin: auto;
           /*  background-color: blue; */
            line-height: 50px;
        }
        .spi .fa-plus-square-o {
            /* width: 300px;
            margin: auto;
            height: 30px; */
            font-size: 80px;
        }
        .sxq{
            top:50%;
            position: absolute;
            width: 400px;
            height: 80px;
            margin: auto;
          /*   background-color: yellow; */
            line-height: 50px;
        }
        .sbu{
            /* top:50%;
            position: absolute; */
            top:450px;
            position: absolute;

        }
        .bb{
            width: 100px;
            height: 40px;
            border-radius: 10%;
            background-color: darkcyan;
        }
        .bq{
            width: 100px;
            height: 40px;
            border-radius: 10%;
            background-color: aquamarine;
        }



    .ghead{
       position: relative;
    }
    .gl{
        color: black;
        left:5%;
        position: absolute;
    }
    .tj{
        color: black;
        left:15%;
        position: absolute;
    }
    .fl{
        color: black;
        left:25%;
        position: absolute;
    }
    .fa-search{
        left:35%;
        position: absolute;
    }
    .fa-filter{
        left:45%;
        position: absolute;
    }
    .fa-exchange{
        left:55%;
        position: absolute;
    }
    .qh{
        color: black;
        left:65%;
        position: absolute;
    }
</style>